<template>
    <div>
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
      <city-alphabet :cities="cities" @change="handelLetterChange"></city-alphabet>
    </div>
</template>

<script>
  import axios from "axios"
    import CityHeader from "./components/CityHeader";
    import CitySearch from "./components/CitySearch";
    import CityList from "./components/CityList";
    import CityAlphabet from "./components/CityAlphabet";
    export default {
        name: "City",
      components: {CityAlphabet, CityList, CitySearch, CityHeader},
      data(){
          return {
            cities:{},
            hotCities:[],
            letter:''
          }
      },
      methods:{
        getCityInfo(){
          axios.get('/api/city.json')
            .then(this.handelGetCityInfo)
        },
        handelGetCityInfo(res){
          res=res.data
          if(res.ret && res.data){
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
        },
        handelLetterChange(letter){
          this.letter=letter
        }
      },
      mounted(){
          this.getCityInfo()
      }
    }
</script>

<style lang="stylus" scoped>

</style>
